<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>高级标签</title>
    <link rel="stylesheet" type="text/css" href="./js/ext/resources/css/ext-all.css" />    
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="./js/ext/adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="./js/ext/ext-all.js"></script>

    <!-- Tabs Example Files -->
<!--     <link rel="stylesheet" type="text/css" href="tabs-example.css" />  -->   
<SCRIPT LANGUAGE="JavaScript">
<!--

/*
grid.on('rowclick', function(grid, rowIndex, e){
      var rec = grid.store.getAt(rowIndex);
      rec.set('status', !rec.get('status'));
      grid.getView().focusEl.focus();
    });
*/
	Ext.onReady(function(){
		Ext.QuickTips.init();
		Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

		var myData = [
			['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
			['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
			['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
			['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
			['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
			['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
			['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
			['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
			['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
			['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
			['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
			['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
			['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
			['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
			['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
			['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
			['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
			['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
			['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
			['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
			['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
			['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
			['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
			['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
			['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
			['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
			['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
			['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],            
			['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
		];
		// create the data store
		var store = new Ext.data.ArrayStore({
			fields: [
			   {name: 'company'},
			   {name: 'price', type: 'float'},
			   {name: 'change', type: 'float'},
			   {name: 'pctChange', type: 'float'},
			   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
			]
		});
		store.loadData(myData);

		
		//表单
		var form  = new Ext.FormPanel({
			title:"测试表单",
			id: 'form',
			//applyTo:'form',
			frame: true,
			//collapsed: true,
			animCollapse: true,
			collapsible: true,
			closable: true,//作为一个tab时起作用
			//draggable: true,			
			defaultType:'textfield',
			items:[{
				fieldLabel:'用户名',
			},{
				fieldLabel:'密码'
			}],
			buttonAlign: 'left',
			buttons:[{
				text: '保存'
			}]
		}).hide();

		//grid
		var grid = new Ext.grid.GridPanel({
			store: store,
			//closable: true,
			columns: [
				{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
				{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
				{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
				{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
				{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
			],
			stripeRows: true,
			autoExpandColumn: 'company',
			height:350,
			width:600,
			title:'资料列表',
			listeners: {
				'rowdblclick': function(g,index,e){
					var record = g.store.getAt(index).data;

					var ttab = g.ownerCt;
					var tid = 'tab_'+index;
					//判断该组件是已经创建了如果创建则直接激活 否则创建
					if(Ext.ComponentMgr.get(tid)){
						ttab.activate(tid);
					} else {
						ttab.add({
							layout: 'form',
							id: tid,
							title: record.company,
							frame: true,
							/*
							margins: {
								top:50
							},*/
							animCollapse: true,
							collapsible: true,
							closable: true,//作为一个tab时起作用							
							defaultType: 'textfield',						
							labelAlign: 'right',					
							buttonAlign: 'left',						
							items:[{
								fieldLabel: '用户名',
								value: record.company
							},{
								fieldLabel: '密码',
								value: record.price
							}],
							buttons:[{
								text: '编辑',
								handler: function(btn){
									Ext.Msg.alert('调试信息','你真的要保存吗');
								}
							},{
								text: '关闭',
								handler: function(btn){
									//Ext.ComponentMgr
									var formlayout = btn.ownerCt.ownerCt;
									var ttab = btn.ownerCt.ownerCt.ownerCt;									
									//ttab.getActiveTab().remove();
									//ttab.hideTabStripItem(ttab.getActiveTab()); //previousSibling()
									ttab.remove(ttab.getActiveTab());//删除当前的标签
									ttab.activate(ttab.getActiveTab().previousSibling());//显示当前之前的一个标签
									//setActiveTab
								}
							}]
						}).show();	
					}
				} //end rowdblclick event
			} //end reg listeners
		});

		//标签页
		var tabs = new Ext.TabPanel({
			renderTo: 'tabs',
			activeTab: 0,
			closable: true,
			animCollapse: true,
			animScroll:true,
			autoScroll: true,
			closable: true,
			
			items:[
				grid
			],
			tbar:[{
				text: '添加新数据',
				handler: function(bar){
					var tbar = bar.ownerCt;
					var tab = tbar.ownerCt;
					if(Ext.ComponentMgr.get('tab_add')){
						tab.activate('tab_add');
					} else {
						tab.add({
							layout: 'form',
							id:'tab_add',
							title: '新增数据',
							closable: true,
							frame: true,
							defaultType: 'textfield',
							labelAlign: 'right',
							items:[{
								fieldLabel: '用户名'
							},{
								fieldLabel: '密码'
							}],						
							buttonAlign: 'left',
							buttons: [{
								text: '新增'
							},{
								text: '关闭',
								handler: function(btn){
									var formlayout = btn.ownerCt.ownerCt;
									var ttab = btn.ownerCt.ownerCt.ownerCt;
									ttab.remove(ttab.getActiveTab());//删除当前的标签
									//ttab.activate(0);//显示当前之前的一个标签
									ttab.setActiveTab(0);
								}
							}]
							
						}).show();
					}
					
				}
			},{
				text: '待扩展',
				handler: function(bar){
					Ext.Msg.alert('温馨提示','待扩展..........');
				}
			}],
			buttonAlign:'left',
			
			bbar: new Ext.Toolbar({
				items: [{
					text: 'bbar Left'
				},'->',{
					text: 'bbar Right'
				}]
			}),
			fbar:[{
				text: '菜单一'
			},{
				text: '菜单一'
			}]
		});	
	});
//-->
</SCRIPT>
</head>

<body>
<div id="form" style="padding:10px"></div>
<div id="tabs" style="padding:10px">
	<div id="grid"></div>
</div>
</body>
</html>